<template>
  <div class="diagram-panel">
    <div class="setting-block">
      <div>快捷样式</div>
      <div class="short-styles">
        <div
            v-for="(item, index) in shortStyles"
            :key="index"
            :style="{ 'backgroundColor': item.backgroundColor, 'borderColor': item.borderColor, 'borderWidth': item.borderWidth }"
            @click="setStyle(item)"
        >
        </div>
      </div>
    </div>
    <div class="setting-block">
      <div class="setting-item" v-if="isTextNode">
        <span>关联笔记</span>
        <el-tree-select
            filterable
            v-model="insertNodeValue"
            :data="selectNodeTree"
            :render-after-expand="false"
            node-key="id"
            clearable
            @change="setNodeLink()"
        >
          <template #default="{ node, data }">
            <span>
              <el-icon>
                <FlowChart v-if="data.icon === 'FlowChart'"/>
                <Xmind v-else-if="data.icon === 'Xmind'"/>
                <Document v-else-if="data.icon === 'Document'"/>
                <Folder v-else/>
              </el-icon>
              {{ node.label }}
            </span>
          </template>
        </el-tree-select>
      </div>
      <div class="setting-item" v-if="isTextNode && insertNodeValue && style.link">
        <span>跳转到笔记</span>
        <el-link :href="style.link" target="_blank" type="primary">{{style.linkText}}</el-link>
      </div>
      <div class="setting-item">
        <span>背景色</span>
        <el-color-picker
            :predefine="defaultColors"
            v-model="style.backgroundColor"
            show-alpha
            @active-change="(c) => $_changeColorProperty(c, 'backgroundColor')"
        />
      </div>
<!--      <div class="setting-item">
        <span>背景渐变色</span>
        <el-color-picker
            :predefine="defaultColors"
            v-model="style.gradientColor"
            show-alpha
            @active-change="(c) => $_changeColorProperty(c, 'gradientColor')"
        />
      </div>-->
      <div class="setting-item">
        <span>线条样式</span>
        <el-select v-model="style.borderStyle" @change="$_selectBorder">
          <el-option value="hidden" label="不显示"></el-option>
          <el-option
              v-for="(border, index) in borderStyles"
              :value="border.value"
              :key="index"
          >
            <div class="border-style" :style="{ 'borderBottomStyle': border.value}"></div>
          </el-option>
        </el-select>
      </div>
      <div class="setting-item">
        <span>线条颜色</span>
        <el-color-picker
            :predefine="defaultColors"
            v-model="style.borderColor"
            show-alpha
            @active-change="(c) => $_changeColorProperty(c, 'borderColor')"
        />
      </div>
      <div class="setting-item">
        <span>线条宽度</span>
        <el-select v-model="style.borderWidth" @change="$_changeBorderWidth">
          <el-option
              v-for="item in borderWidthOptions"
              :key="item"
              :label="`${item}px`"
              :value="item"
          ></el-option>
        </el-select>
      </div>
      <div class="setting-item">
        <span>文本颜色</span>
        <el-color-picker
            :predefine="defaultColors"
            v-model="style.fontColor"
            show-alpha
            @active-change="(c) => $_changeColorProperty(c, 'fontColor')"
        />
      </div>
      <div class="setting-item">
        <span>文本大小</span>
        <el-input-number
            v-model="style.fontSize"
            controls-position="right"
            @change="$_changeFontSize"
            :min="12"
            :max="30">
        </el-input-number>
        <span>px</span>
      </div>
      <div class="setting-item">
        <span>文本字体</span>
        <el-select v-model="style.fontFamily" @change="$_changeFontFamily">
          <el-option
              v-for="(fontFamily, index) in fontFamilies"
              :value="fontFamily.value"
              :label="fontFamily.label"
              :key="index"
          ></el-option>
        </el-select>
      </div>
      <div class="setting-item">
        <span>行高</span>
        <el-select v-model="style.lineHeight" @change="$_changeLineHeight">
          <el-option
              v-for="(item, index) in lineHeightOptions"
              :key="index"
              :label="`${item}`"
              :value="item"
          ></el-option>
        </el-select>
      </div>
      <div class="setting-item">
        <span>对齐</span>
        <el-radio-group v-model="style.textAlign" size="small" @change="$_changeTextAlign">
          <el-radio-button value="left">左对齐</el-radio-button>
          <el-radio-button value="center">居中</el-radio-button>
          <el-radio-button value="right">右对齐</el-radio-button>
        </el-radio-group>
      </div>
      <div class="setting-item">
        <span>文本样式</span>
        <el-button @click="$_changeFontWeight" size="small" :type="style.fontWeight === 'bold' ? 'primary' : ''">B</el-button>
        <el-button @click="$_changeTextDecoration" size="small" :type="style.textDecoration === 'underline' ? 'primary' : ''">U</el-button>
        <el-button @click="$_changeFontStyle" size="small" :type="style.fontStyle === 'italic' ? 'primary' : ''">I</el-button>
      </div>
      <div style="margin-top: 10px">
        <el-button @click="$emit('setZIndex', 'top')">置为顶部</el-button>
        <el-button @click="$emit('setZIndex', 'bottom')">置为底部</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {shortStyles, borderStyles, fontFamilies, defaultColors} from '../constant'
import {Folder, Document} from "@element-plus/icons-vue"
import { getHost, getNoteNameAndIcon, getIconPath } from '@/utils'
import Xmind from "@/icons/Xmind.vue"
import FlowChart from "@/icons/FlowChart.vue"
import useNoteStore from "@/stores/note.js"

const noteStore = useNoteStore()
const defaultStyle = {
  backgroundColor: '', // 填充色
  gradientColor: '', // 渐变色
  borderType: 0, // 线条类型
  borderColor: '', // 填充颜色
  borderWidth: 1, // 线条宽度
  borderStyle: '', // 线条类型
  fontSize: 12, // 文本大小
  fontColor: '', // 文本颜色
  fontWeight: '', // 文本加粗
  fontFamily: '', // 文本样式
  lineHeight: '', // 行高
  textAlign: '', // 对齐
  link: '', // 链接
  linkText: '', // 链接文字
  linkId: '', // 链接id
  textDecoration: '', // 下划线
  fontStyle: '', // 斜体
}

export default {
  components: {FlowChart, Xmind, Folder, Document},
  props: {
    elementsStyle: Object,
    isTextNode: Boolean,
    onlyEdge: Boolean // 是否是只设置边的属性，当只设置边的属性时，隐藏快捷样式和背景色设置
  },
  data() {
    return {
      shortStyles,
      borderStyles,
      fontFamilies,
      defaultColors,
      insertNodeValue: '',
      style: {...defaultStyle},
      borderWidthOptions: Array(11).fill(1).map((_, i) => i),
      /*SketchPicker: Sketch,*/
      fontWeight: '', // 文本加粗
      lineHeightOptions: Array(5).fill(1).map((_, i) => _ + i * 0.5)
    }
  },
  watch: {
    elementsStyle: {
      handler(val) {
        this.style = {...defaultStyle, ...val}
        this.insertNodeValue = val.linkId
      },
      immediate: true,
      deep: true,
    }
  },
  methods: {
    setNodeLink() {
      if (this.insertNodeValue) {
        const idArr = this.insertNodeValue.split('-')
        const noteId = parseInt(idArr[idArr.length - 1])
        const base = import.meta.env.VITE_BASE_PATH
        const {label, icon} = getNoteNameAndIcon(this.selectNodeTree, this.insertNodeValue)
        const filePath = getIconPath(icon)
        this.$emit('setStyle', {
          link: getHost() + base + '/file/' + filePath + '/' + noteId,
          borderColor: '#409eff',
          backgroundColor: 'rgba(64,158,255,0.2)',
          fontColor: '#409eff',
          linkId: this.insertNodeValue,
          textDecoration: 'underline',
          fontStyle: 'italic',
          linkText: label
        })
        this.$emit('setText', label)
      } else {
        this.$emit('setStyle', {
          link: '',
          borderColor: '',
          backgroundColor: '',
          fontColor: '',
          linkId: '',
          textDecoration: '',
          fontStyle: '',
          linkText: '',
        })
        this.$emit('setText', '')
      }
    },
    setStyle(item) {
      this.$emit('setStyle', item)
    },
    $_selectBorder(val) {
      this.$emit('setStyle', {
        borderStyle: val
      })
    },
    $_changeColorProperty(color, type) {
      this.$emit('setStyle', {
        [type]: color
      })
    },
    $_changeFontSize(val) {
      this.$emit('setStyle', {
        fontSize: val
      })
    },
    $_changeBorderWidth(val) {
      this.$emit('setStyle', {
        borderWidth: val
      })
    },
    $_changeFontFamily(val) {
      this.$emit('setStyle', {
        fontFamily: val
      })
    },
    $_changeLineHeight(val) {
      this.$emit('setStyle', {
        lineHeight: val
      })
    },
    $_changeFontWeight() {
      if (this.style.fontWeight === 'bold') {
        this.style.fontWeight = 'normal'
        this.$emit('setStyle', {
          fontWeight: 'normal'
        })
      } else {
        this.style.fontWeight = 'bold'
        this.$emit('setStyle', {
          fontWeight: 'bold'
        })
      }
    },
    $_changeTextDecoration() {
      if (this.style.textDecoration === 'underline') {
        this.style.textDecoration = 'none'
        this.$emit('setStyle', {
          textDecoration: 'none'
        })
      } else {
        this.style.textDecoration = 'underline'
        this.$emit('setStyle', {
          textDecoration: 'underline'
        })
      }
    },
    $_changeFontStyle() {
      if (this.style.fontStyle === 'italic') {
        this.style.fontStyle = 'normal'
        this.$emit('setStyle', {
          fontStyle: 'normal'
        })
      } else {
        this.style.fontStyle = 'italic'
        this.$emit('setStyle', {
          fontStyle: 'italic'
        })
      }
    },
    $_changeTextAlign(val) {
      this.$emit('setStyle', {
        textAlign: val
      })
    },
    setDisable(item) {
      const newItem = {...item}
      if (newItem.type === 1) {
        newItem.id = '1-' + newItem.id
        if (!newItem.children || newItem.children.length === 0) {
          newItem.disabled = true
        } else {
          newItem.children = newItem.children.map((child) => {
            return this.setDisable(child)
          })
        }
      } else {
        if (newItem.id === parseInt(this.$route.params.drawioId + '')) {
          newItem.disabled = true
        }
        newItem.id = '2-' + newItem.id
      }
      return newItem
    }
  },
  computed: {
    selectNodeTree() {
      return noteStore.noteData[0].children.map((item) => {
        return this.setDisable(item)
      })
    }
  }
}
</script>

<style scoped>
.diagram-panel {
  padding: 20px;
}

.short-styles {
  width: 240px;
}

.short-styles > div {
  width: 20px;
  height: 20px;
  margin: 0 10px 5px 0;
  box-sizing: border-box;
  float: left;
  border: 1px solid #fff;
  cursor: pointer;
}

.border-style {
  width: 150px;
  height: 0;
  margin-top: 18px;
  border-bottom-width: 1px;
  border-bottom-color: black;
}

.setting-block {
  overflow: hidden;
}

.setting-item {
  line-height: 12px;
  font-size: 12px;
  display: flex;
  vertical-align: middle;
  align-items: center;
  margin-top: 10px;
}

.setting-item > span {
  width: 60px;
  margin-right: 10px;
  text-align: right;
  flex-shrink: 0;
  flex-grow: 0;
}

.border-color {
  width: 40px;
  height: 30px;
  display: inline-block;
  border: 1px solid #eaeaeb;
}

</style>